# Component: Navigation Item

Recursive link handler with dynamic dropdown injection

Navigation Atom

### BEM Anatomy

| Type      | Class Name                | Description                                                                                        |
| --------- | ------------------------- | -------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-navigation`          | The base wrapper for any navigation node. Modifier: `--dropdown`.                                  |
| Modifier  | --dropdown                |                                                                                                    |
| Element   | `__link`                  | The interactive anchor. Modifiers like `--dropdown-toggle` and `--dropdown-item` define context.   |
| Modifier  | `__link--dropdown-toggle` | Adds chevron icons and sets `aria-haspopup` behavior for opening the sub-menu.                     |
| Modifier  | `__link--dropdown-item`   | Applied when the link is nested inside a sub-menu; adjusts padding and font size for list density. |
| Element   | `__icon`                  | Font-awesome icon container with standardized right margin.                                        |
| Element   | `__dropdown`              | The `<ul>` menu container (Bootstrap `dropdown-menu`).                                             |
| Element   | `__dropdown-item`         | The wrapper (`<li>`) for links inside the sub-menu.                                                |
| Modifier  | `__dropdown-item--title`  | Applied to the "Header" link inside a dropdown when a parent link is also a destination.           |

### Dropdown & Hierarchy Logic

The component is self-referencing. When a `NavigationItem` contains `ChildItems`, it renders a dropdown toggle and iterates through the children, passing them back into a new instance of `NavigationItemComponent`.

##### Generated HTML (Nested State)

```html
<li class="as-navigation as-navigation--dropdown nav-item dropdown">
    <a class="as-navigation__link as-navigation__link--dropdown-toggle dropdown-toggle" 
       data-bs-toggle="dropdown">
        <span>Services</span>
    </a>
    <ul class="as-navigation__dropdown dropdown-menu">
        <!-- Title link if the parent has its own content -->
        <li class="as-navigation__dropdown-item--title">
            <a class="as-navigation__link--dropdown-item dropdown-item">Services Overview</a>
        </li>
        <!-- Child recursion -->
        <li class="as-navigation">
            <a class="as-navigation__link">Web Design</a>
        </li>
    </ul>
</li>
```

##### SCSS

```scss
.as-navigation {
  &__link {
    white-space: nowrap; // Keeps menu items on one line
  }
  
  &__icon {
    margin-right: 0.25rem;
  }

  &__dropdown-item {
    &--title {
      .as-navigation__link {
        // Distinguishes the parent link
        // inside its own dropdown
        font-weight: bold;
      }
    }
  }
}
```
